<template>
  <div class="btn">
    <img ref="image" alt="" />
  </div>
</template>
<script>
import QrCodeWithLogo from 'qr-code-with-logo';

export default {
  name: 'qrTest3',
  data() {
    return {
      url: 'http://id.akctest1.com/s/8dl2h',
      icon:
        'http://thirdwx.qlogo.cn/mmopen/vi_32/TYDfpP1M6d8mUABN0fnXUvIfww8cIaBo6083Picmvgf6MCA4nLNMKZtSI2V1P8K3Yzy49MyysdqAAXNcp9sFcWg/132'
    };
  },
  mounted() {
    const image = this.$refs.image;
    let options = {
      image,
      content: this.url,
      nodeQrCodeOptions: {
        // 兼容 node-qrcode
        margin: 2
      }
    };
    QrCodeWithLogo.toImage({
      ...options,
      logo: {
        src:
          'https://akmer.aikucun.com/81d5720c33360ddcccd773f4e5ea6319a7f7c1e8_1591428184092_78.png'
      }
    })
      .then(() => console.log('success'))
      .catch(() => console.log('fail'));
  }
};
</script>

<style scoped>
img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
</style>
